<template>
  <view class="forumPage">
    <!-- Forum Post List -->
    <view class="postList">
      <view
        class="postItem"
        v-for="(item, i) in jiuyuan"
        :key="i"
        @click="godetail(item)"
      >
        <view class="postHeader">
          <text class="author">{{ item.biaoti }}</text>
        </view>
        <view class="postBody">
          <image
            :src="`http://localhost:8888${item.img}`"
            class="postImage"
            mode="aspectFill"
          ></image>
        </view>
        <view class="postFooter">
          <text class="replies">{{ item.liulancishu }} 浏览</text>
          <text class="views">{{ item.createTime }} </text>
        </view>
      </view>
    </view>
    <view class="zanewu" v-if="jiuyuan.length == 0">
      还没有帖子，快去发帖吧！
    </view>
    <!-- "Post a New Thread" Button -->
    <view class="postButton" @click="goToPostPage">
      <text>发帖</text>
    </view>
  </view>
</template>

<script>
import { qingxiList } from '@/request/API/xinwentongzhi/index'
import uploadFile from '@/components/uploadFile.vue'

export default {
  components: {
    uploadFile,
  },
  data() {
    return {
      jiuyuan: [],
      name: '',
    }
  },
  onLoad(options) {
    this.name = options.name
    this.qingxiList(options.name)
  },
  onShow() {},
  methods: {
    qingxiList(name) {
      qingxiList({
        qid: name,
      }).then((res) => {
        this.jiuyuan = res.data.list
        console.log(this.jiuyuan)
      })
    },
    godetail(news) {
      uni.navigateTo({
        url: `/pages/qingxi/details?id=${news.id}`,
      })
    },
    goToPostPage() {
      uni.navigateTo({
        url: `/pages/qingxi/addTie?id=${this.name}`, // navigate to the "Post a New Thread" page
      })
    },
  },
}
</script>

<style lang="scss">
.zanewu {
  width: 80%;
  /* margin: 1rem auto; */
  position: fixed;
  left: 10%;
  text-align: center;
  top: 35%;
  /* text-align: 35%; */
  font-size: 1.5rem;
}

.forumPage {
  display: flex;
  flex-direction: column;
  background: #f4f4f4;
  height: 100vh;
}

.postList {
  flex-grow: 1;
  padding: 10px;
  overflow-y: auto;
}

.postItem {
  background: white;
  margin-bottom: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

.postHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.author {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.postDate {
  width: 22%;
  font-size: 14px;
  color: #999;
  text-align: center;
}

.postTitle {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #333;
}

.postBody {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.postContent {
  font-size: 14px;
  color: #555;
  margin-bottom: 0.5rem;
}

.postImage {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
}

.postFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  font-size: 14px;
  color: #777;
}

.replies {
  cursor: pointer;
  color: #007bff;
}

.views {
  color: #555;
}

.postButton {
  width: 100%;
  height: 50px;
  background: #007bff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  position: fixed;
  bottom: 10px;
  left: 0;
  border-radius: 30px;
}

.postButton text {
  margin: 0;
}
</style>
